<template>
  <div class="container">
    <div class="main">
      <div class="main-top">
        <Search />
      </div>
      <div class="main-bottom">
        <div style="display: flex">
          <div class="avatar">群聊</div>
          <div class="name">项目开发组</div>
        </div>
      </div>
    </div>
    <div class="main-left">
      <h3>项目开发组</h3>
      <el-divider></el-divider>
    </div>
    <div class="main-right">
        <Sidebar />
    </div>
  </div>
</template>

<script>
import Search from "./Search.vue";
import Sidebar from "./Sidebar.vue";
export default {
  name: "group",
  components: {
    Search,
    Sidebar
  },
  methods: {}
};
</script>

<style scoped lang="less">
.lemon-container {
  position: relative;
}
.container {
  display: flex;
  flex-direction: initial;

  .main {
    width: 266px;
    height: 780px;
    background: #f8f8f9;
    margin-right: -266px;
  }
  .main-top {
    padding-bottom: 72px;
    background: #fff;
  }
  .main-bottom {
    display: flex;
    .avatar {
      width: 42px;
      height: 42px;
      background: #e98239;
      color: #fff;
      line-height: 42px;
      text-align: center;
      margin-left: 15px;
    }
    .name {
      line-height: 42px;
      margin-left: 12px;
    }
  }
  .main-left {
    width: 100%;

    h3 {
      text-align: center;
      margin-left: 207px;
    }
    /deep/.el-divider--horizontal {
      margin: 0;
    }
  }
  .main-right {
    width: 300px;
    height: 780px;
    position: absolute;
    left: 973px;
    bottom: 0;
    border-radius: 0 5px 5px 0;
    border: 1px solid #ddd;
  }
}
</style>